<template>
	<view>
		<view class="back">
		</view>
		<view class="header">
			<uni-icons type="back" color="#ffffff" :size="30" @click="back_page" />
			<view class="search-box" @click="gotoSearch">
				<uni-search-bar :radius="100" placeholder="请输入关键词" cancelButton="none" :readonly="true"></uni-search-bar>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="home">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
				:interval="3000" :duration="1000">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="(item,index) in swipers" :key="index" id="swiper-item">
					<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分类 -->
		<view class="category">
			<navigator url="../category/category" class="cate-item" hover-class="none">
				<image
					src="https://img2.baidu.com/it/u=2197703839,1321164368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					mode="widthFix"></image>
				<text>月嫂</text>
			</navigator>
			<navigator url="../category/category" class="cate-item" hover-class="none">
				<image src="https://img2.baidu.com/it/u=510452510,4157530906&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					mode="widthFix"></image>
				<text>住家育儿嫂</text>
			</navigator>
			<navigator url="../category/category" class="cate-item" hover-class="none">
				<image src="https://img1.baidu.com/it/u=2077790492,88633968&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					mode="widthFix"></image>
				<text>白班育儿嫂</text>
			</navigator>
			<navigator url="../category/category" class="cate-item" hover-class="none">
				<image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.2ZUZExxYEzYc12cbU7nfzgHaHa?w=180&h=180"
					mode="widthFix"></image>
				<text>钟点工</text>
			</navigator>
			<navigator url="../category/category" class="cate-item" hover-class="none">
				<image src="https://img0.baidu.com/it/u=1236624165,968428029&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
					mode="widthFix"></image>
				<text>白班保姆</text>
			</navigator>
		</view>

		<!-- 服务 -->
		<view class="service">
			<!-- 头部 -->
			<view class="service-heard">
				<text class="text-l">优选活动</text>
				<view>
					<text class="text-r" style="font-size: 12px;padding-right: 8px;">查看更多</text>
					<!-- <uni-icons type="arrowright" size="20"></uni-icons> -->
				</view>

			</view>
			<!-- 底部 -->

			<view class="service-items" v-for="(item,index) in serviceList" :key="index">
				<image :src="item.img"></image>
				<view class="items-right">
					<text class="text1">{{item.text1}}</text>
					<text class="text2">{{item.text2}}</text>
					<view>
						<text class="text3">¥{{item.price}}</text>
						<text class="text4" style="padding-left: 5px;">已预约:&nbsp;&nbsp;{{item.numbers}}</text>
					</view>
				</view>
				<view class="shoppingcar">
					<image
						src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UrhO0785WqZxln0zblAvRwHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7">
					</image>
					<text class="shopnums">2</text>
				</view>
				<view class="shopscope">
					<image src="https://i.postimg.cc/CLWWP4np/ZS.png"></image>
					<text>4.9</text>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图列表
				mycurrent: 0,
				swipers: [
					// 'https://i.postimg.cc/m2TFXBjN/2.webp',
					// 'https://i.postimg.cc/15jPRJ1T/3.jpg',
					// 'https://i.postimg.cc/wT78rLRk/4.jpg',
					// 'https://i.hd-r.cn/4475117a59e4eaf1d635afd3cbb6974f.jpg',
					// 'https://i.hd-r.cn/f62ae2f55994807937510186a4ab691e.jpg',
					// 'https://i.hd-r.cn/1a9830b161c9ec0caf1e403f4446b88f.png'
					'https://ts3.cn.mm.bing.net/th?id=OIP-C.eO4CeJs7Qgjl-X0GkOIu5wHaEn&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2',
					'https://ts2.cn.mm.bing.net/th?id=OIP-C.R6yGybbhLKH4KcoQgzp21wHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2',
					'https://tse3-mm.cn.bing.net/th/id/OIP-C._a2oFdqjiXAmeGSoPX7YgAHaFP?w=267&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7',
					
					
				],
				// 服务列表
				serviceList: [{
						img: 'https://tenfei01.cfp.cn/creative/vcg/nowater800/new/VCG211292663604.jpg?x-oss-process=image/format,webp',
						text1: '专业育儿嫂',
						text2: '关注宝宝健康，守护宝宝成长',
						price: '59.90',
						numbers: '4',
					},

					{
						img: "https://ts2.cn.mm.bing.net/th?id=OIP-C.Zb4qVOV1otRqHq_1qliB0wHaLU&w=202&h=309&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
						text1: '白班育儿嫂',
						text2: '希望宝宝健康成长',
						price: '100.90',
						numbers: '9',
					},
					{
						img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.nkyAmRbRKayMH5eTjup1KwHaHa?w=182&h=181&c=7&r=0&o=5&dpr=1.5&pid=1.7',
						text1: '白班保姆',
						text2: '让宝宝从小养成好习惯',
						price: '80.90',
						numbers: '4',
					},
					{
						img: 'https://pic1.zhimg.com/v2-08b7b958f2b631ac4565a56e77060328_r.jpg',
						text1: '月嫂',
						text2: '给你最好的服务',
						price: '60.90',
						numbers: '10',
					},
				]
			}
		},
		methods: {
			//直接返回上一级
			back_page() {
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg1/search/search',
				})
			},
			handlechange(e) {
				this.mycurrent = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 背景图
	.back {
		width: 100%; 
		height: 320px;
		z-index: -1;    
		border-radius: 0 0 20px 20px;
		background: linear-gradient(#f08988, #ff8583);
		position: relative;
	}

	// 头部
	.header {
		// background-color: pink
		padding-left: 20px;
		width: 100%;
		height: 60px;
		margin-top: -280px;
		display: flex;
		flex-direction: row;
		align-items: center;

		// z-index: 100;
		// 搜索框
		.search-box {
			margin-left: 20px;
			height: 50px;
			width: 280px;
		}
	}

	// 轮播图
	.home {
		width: 100%;
		height: 220px;

		swiper {
			width: 100%;
			height: 200px;

			image {
				// margin-left: -10px;
				width: 100%;
				height: 180px;
				border-radius: 25px;
			}
		}

	}

	.swiper-item {
		// border-radius: 6rpx;
		height: 250px;
		width: 210px;
		// overflow: hidden;
		// height: 85%;
		transform: scale(0.90);
		transition: all 0.5s ease-in-out;

		// &.active {
		// 	transform: scale(1.5);
		// }
	}

	// 分类板块
	.category {
		width: 100%;
		height: 100px;
		margin-top: 10px;
		// border: 1px solid #ccc;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
			// background-color: pink;
			height: 100%;

			image {
				width: 50px;
				border-radius: 50%;
			}

			text {
				width: auto;
				padding: 3px 4px;
				border-radius: 10px;
				display: block;
				margin-top: 10px;
				font-size: 11px;
				// box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}
		}
	}

	// 服务
	.service {
		// 头部
		width: 100%;
		display: flex;
		flex-direction: column;

		.service-heard {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 50px;
			// border-bottom: 0.2px solid #c6c6c6;
			// border-top:10px solid #cccccc;
			// background-color: pink;
			justify-content: space-between;
			align-items: center;

			.text-l {
				margin-left: 12px;
				font-weight: 700;
			}

			.text-r {
				font-size: 16px;
				color: #979797;
			}
		}

		// 底部
		.service-items {
			// border-top: 1px solid #c6c6c6;
			position: relative;
			border-radius: 10px;
			display: flex;
			flex-direction: row;
			width: 95%;
			height: 150px;
			background-color: #f8f7f3;
			margin: 0 auto;
			margin-bottom: 10px;

			// background-color: pink;
			// 图片
			image {
				margin: auto 0;
				margin-left: 6px;
				display: flex;
				// flex:1 1 auto;
				border-radius: 12px;
				width: 110px;
				height: 120px;
				padding-left: 5px;
			}

			// 左上角评分
			.shopscope {
				position: absolute;
				top: 15px;
				left: 12px;
				width: 45px;
				height: 20px;
				border-radius: 5px;
				display: flex;
				flex-direction: row;
				justify-content: space-evenly;
				align-items: center;
				background-color: #979797;

				image {
					width: 15px;
					height: 15px;
					padding: 0;
					margin-top: 4px;
					margin-right: 4px;
				}

				text {
					font-size: 12px;
					color: #fff;
					margin-right: 4px;
				}
			}

			// 右边购物车
			.shoppingcar {
				// position:relative;
				text-align: center;

				.shopnums {
					position: absolute;
					bottom: 40px;
					right: 16px;
					margin: -2px;
					width: 14px;
					height: 14px;
					border-radius: 50%;
					padding: 0px;
					background-color: #C93321;
					color: #fff;
					font-size: 10px;
					text-align: cneter;
					line-height: 14px;
				}

				image {
					position: absolute;
					bottom: 20px;
					right: 20px;
					margin: -2px;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					padding: 0px;
				}
			}

			.items-right {
				margin-left: 20px;
				display: flex;
				flex-direction: column;
				// margin-top: 20px;
				// align-items: center;
				justify-content: center;

				// flex:3 1 auto;
				// 
				.text1 {
					font-size: 18px;
					font-weight: 800;
					// margin-bottom: 2px;
				}

				.text2 {
					font-size: 14px;
					color: #979797;
					overflow: hidden;
					margin-top: 25px;
					margin-bottom: 20px;
				}

				.text3 {
					color: #C93321;
					font-weight: 600;
					margin-right: 6px;
				}

				.text4 {
					font-size: 14px;
					color: #979797;
					margin-bottom: 3px;
				}

			}

			&:hover {
				box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
			}
		}
	}
</style>
